<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { i18n } from 'boot/i18n'
import { Notify } from 'quasar'
import api from 'src/api'
import type { MeetingRoomConfigResponse, ReserveTimesConfigResponse, TermsConditionsPayload } from 'src/api/service'

const tc = i18n.global.tc

// tab状态
const tab = ref('resources')

// 系统设置
const systemSettings = ref({
  // 资源配置
  resources: {
    room50: 10,
    room100: 5,
    room300: 3,
    room500: 1
  },

  // 规则配置
  rules: {
    autoReleaseTime: 30, // 会议未开始后多少分钟自动释放资源
    maxBookingDuration: 240, // 最大预定时长（分钟）
    maxAdvanceBookingDays: 30, // 最多提前多少天预定
    maxBookingsPerUser: 5 // 每个用户最多可以有多少个未开始的预定
  },

  // 通知设置
  notifications: {
    // 会议预定成功通知
    bookingSuccess: {
      emailEnabled: true,
      emailTemplate: '尊敬的{UserName}，您已成功预定会议室。会议主题：{MeetingTopic}，开始时间：{StartTime}，结束时间：{EndTime}，会议室类型：{RoomType}。会议链接：{MeetingLink}',
      smsEnabled: true,
      smsTemplate: '您已成功预定会议室。会议主题：{MeetingTopic}，开始时间：{StartTime}。'
    },

    // 会议开始前提醒
    meetingReminder: {
      emailEnabled: true,
      emailTemplate: '尊敬的{UserName}，您预定的会议将在{ReminderTime}分钟后开始。会议主题：{MeetingTopic}，开始时间：{StartTime}，会议链接：{MeetingLink}',
      smsEnabled: true,
      smsTemplate: '您的会议将在{ReminderTime}分钟后开始。会议主题：{MeetingTopic}',
      reminderTimes: [15, 30, 60] // 提前多少分钟提醒
    },

    // 会议取消通知
    bookingCancellation: {
      emailEnabled: true,
      emailTemplate: '尊敬的{UserName}，您预定的会议已取消。会议主题：{MeetingTopic}，原定开始时间：{StartTime}',
      smsEnabled: false,
      smsTemplate: '您预定的会议已取消。会议主题：{MeetingTopic}'
    }
  },

  // API配置
  api: {
    tencentMeetingAppId: 'your-app-id',
    tencentMeetingAppSecret: 'your-app-secret',
    tencentMeetingApiUrl: 'https://api.meeting.tencent.com/v1',
    apiEnabled: true
  }
})

// 会议室资源配置
const roomConfig = ref<MeetingRoomConfigResponse['room_info']>({
  id: '',
  creation_time: '',
  update_time: '',
  type_50_num: 0,
  type_50_visible: true,
  type_100_num: 0,
  type_100_visible: true,
  type_300_num: 0,
  type_300_visible: true,
  type_500_num: 0,
  type_500_visible: true,
  type_1000_num: 0,
  type_1000_visible: true
})
const loadingRoomConfig = ref(false)
const savingRoomConfig = ref(false)

// 原始数据备份
const originalRoomConfig = ref<MeetingRoomConfigResponse['room_info']>()
const originalReserveTimesConfig = ref<ReserveTimesConfigResponse>()
const originalNotificationsConfig = ref()
const originalApiConfig = ref()
const originalEmailConfig = ref()
const originalTermsConfig = ref<TermsConditionsPayload>()

// 深拷贝函数
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const deepClone = (obj: any): any => {
  return JSON.parse(JSON.stringify(obj))
}

// 检测数据是否有变更的computed属性
const hasRoomConfigChanged = computed(() => {
  if (!originalRoomConfig.value) return false
  return JSON.stringify(roomConfig.value) !== JSON.stringify(originalRoomConfig.value)
})

const hasReserveTimesConfigChanged = computed(() => {
  if (!originalReserveTimesConfig.value) return false
  return JSON.stringify(reserveTimesConfig.value) !== JSON.stringify(originalReserveTimesConfig.value)
})

const hasNotificationsConfigChanged = computed(() => {
  if (!originalNotificationsConfig.value) return false
  return JSON.stringify(systemSettings.value.notifications) !== JSON.stringify(originalNotificationsConfig.value)
})

const hasApiConfigChanged = computed(() => {
  if (!originalApiConfig.value) return false
  return JSON.stringify(systemSettings.value.api) !== JSON.stringify(originalApiConfig.value)
})

const hasEmailConfigChanged = computed(() => {
  if (!originalEmailConfig.value) return false
  return JSON.stringify(emailConfig.value) !== JSON.stringify(originalEmailConfig.value)
})

const hasTermsConfigChanged = computed(() => {
  if (!originalTermsConfig.value) return false
  return JSON.stringify(termsConfig.value) !== JSON.stringify(originalTermsConfig.value)
})

// 获取会议室配置
const fetchRoomConfig = async () => {
  loadingRoomConfig.value = true
  try {
    const response = await api.service.txMeeting.getMeetingRoomConfig()
    if (response.data && response.data.room_info) {
      roomConfig.value = response.data.room_info
      originalRoomConfig.value = deepClone(response.data.room_info)
    }
  } catch (error) {
    console.error('Error fetching room config:', error)
    Notify.create({
      message: tc('获取会议室配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    loadingRoomConfig.value = false
  }
}

// 保存会议室配置
const saveRoomConfig = async () => {
  savingRoomConfig.value = true
  try {
    // 只发送可修改的字段
    const payload = {
      type_50_num: roomConfig.value.type_50_num,
      type_50_visible: roomConfig.value.type_50_visible,
      type_100_num: roomConfig.value.type_100_num,
      type_100_visible: roomConfig.value.type_100_visible,
      type_300_num: roomConfig.value.type_300_num,
      type_300_visible: roomConfig.value.type_300_visible,
      type_500_num: roomConfig.value.type_500_num,
      type_500_visible: roomConfig.value.type_500_visible,
      type_1000_num: roomConfig.value.type_1000_num,
      type_1000_visible: roomConfig.value.type_1000_visible
    }
    await api.service.txMeeting.updateMeetingRoomConfig(payload)
    // 更新原始备份
    originalRoomConfig.value = deepClone(roomConfig.value)
    Notify.create({
      message: tc('会议室配置保存成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
  } catch (error) {
    console.error('Error saving room config:', error)
    Notify.create({
      message: tc('保存会议室配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    savingRoomConfig.value = false
  }
}

// 预定时间配置
const reserveTimesConfig = ref<ReserveTimesConfigResponse>({ // 使用 API 类型
  reserve_room_advance_minutes: 30,
  meeting_after_reserve_minutes: 60,
  default_advance_notice_minutes: 30
})
const loadingReserveTimes = ref(false)
const savingReserveTimes = ref(false)

// 获取预定时间配置
const fetchReserveTimesConfig = async () => {
  loadingReserveTimes.value = true
  try {
    const response = await api.service.txMeeting.getReserveTimesConfig()
    if (response.data) {
      reserveTimesConfig.value = response.data
      originalReserveTimesConfig.value = deepClone(response.data)
    }
  } catch (error) {
    console.error('Error fetching reserve times config:', error)
    Notify.create({
      message: tc('获取预定时间配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    loadingReserveTimes.value = false
  }
}

// 保存预定时间配置
const saveReserveTimesConfig = async () => {
  savingReserveTimes.value = true
  try {
    const payload = { ...reserveTimesConfig.value } // 构造 payload
    await api.service.txMeeting.updateReserveTimesConfig(payload)
    // 更新原始备份
    originalReserveTimesConfig.value = deepClone(reserveTimesConfig.value)
    Notify.create({
      message: tc('预定时间配置保存成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
  } catch (error) {
    console.error('Error saving reserve times config:', error)
    Notify.create({
      message: tc('保存预定时间配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    savingReserveTimes.value = false
  }
}

// 预定须知配置
const termsConfig = ref<TermsConditionsPayload>({ content: '' })
const loadingTerms = ref(false)
const savingTerms = ref(false)

// 邮箱配置
const emailConfig = ref({
  smtp: '',
  port: 25,
  email: '',
  password: ''
})

// 获取预定须知
const fetchTermsConditions = async () => {
  loadingTerms.value = true
  try {
    const response = await api.service.txMeeting.getTermsConditions()
    if (response.data) {
      termsConfig.value = response.data
      originalTermsConfig.value = deepClone(response.data)
    }
  } catch (error) {
    console.error('Error fetching terms config:', error)
    Notify.create({
      message: tc('获取预定须知失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    loadingTerms.value = false
  }
}

// 保存预定须知
const saveTermsConditions = async () => {
  savingTerms.value = true
  try {
    await api.service.txMeeting.updateTermsConditions({ content: termsConfig.value.content })
    // 更新原始备份
    originalTermsConfig.value = deepClone(termsConfig.value)
    Notify.create({
      message: tc('预定须知保存成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
  } catch (error) {
    console.error('Error saving terms config:', error)
    Notify.create({
      message: tc('保存预定须知失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  } finally {
    savingTerms.value = false
  }
}

// 添加提醒时间
const addReminderTime = () => {
  const time = parseInt(prompt(tc('请输入提醒时间（分钟）'), '10') || '0')
  if (time > 0 && !systemSettings.value.notifications.meetingReminder.reminderTimes.includes(time)) {
    systemSettings.value.notifications.meetingReminder.reminderTimes.push(time)
    // 排序
    systemSettings.value.notifications.meetingReminder.reminderTimes.sort((a, b) => a - b)
  }
}

// 删除提醒时间
const removeReminderTime = (time: number) => {
  const index = systemSettings.value.notifications.meetingReminder.reminderTimes.indexOf(time)
  if (index !== -1) {
    systemSettings.value.notifications.meetingReminder.reminderTimes.splice(index, 1)
  }
}

// 测试连接
const testApiConnection = () => {
  // 实际应用中会测试API连接
  if (systemSettings.value.api.apiEnabled) {
    alert(tc('API连接成功'))
  } else {
    alert(tc('请先启用API'))
  }
}

// 保存通知配置
const saveNotificationsConfig = async () => {
  try {
    // 这里应该调用API保存通知配置
    // await api.service.txMeeting.updateNotificationsConfig(systemSettings.value.notifications)

    // 更新原始备份
    originalNotificationsConfig.value = deepClone(systemSettings.value.notifications)

    Notify.create({
      message: tc('通知配置保存成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
  } catch (error) {
    console.error('Error saving notifications config:', error)
    Notify.create({
      message: tc('保存通知配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  }
}

// 保存API配置
const saveApiConfig = async () => {
  try {
    // 这里应该调用API保存API配置
    // await api.service.txMeeting.updateApiConfig(systemSettings.value.api)

    // 更新原始备份
    originalApiConfig.value = deepClone(systemSettings.value.api)

    Notify.create({
      message: tc('API配置保存成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
  } catch (error) {
    console.error('Error saving API config:', error)
    Notify.create({
      message: tc('保存API配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  }
}

// 保存邮箱配置
const saveEmailConfig = async () => {
  try {
    // 这里应该调用API保存邮箱配置
    // await api.service.txMeeting.updateEmailConfig(emailConfig.value)

    // 更新原始备份
    originalEmailConfig.value = deepClone(emailConfig.value)

    Notify.create({
      message: tc('邮箱配置保存成功'),
      type: 'positive',
      icon: 'check',
      position: 'top'
    })
  } catch (error) {
    console.error('Error saving email config:', error)
    Notify.create({
      message: tc('保存邮箱配置失败'),
      type: 'negative',
      icon: 'error',
      position: 'top'
    })
  }
}

// 组件挂载时获取所有配置
onMounted(() => {
  fetchRoomConfig()
  fetchReserveTimesConfig()
  fetchTermsConditions() // 调用

  // 初始化其他配置的原始备份
  originalNotificationsConfig.value = deepClone(systemSettings.value.notifications)
  originalApiConfig.value = deepClone(systemSettings.value.api)
  originalEmailConfig.value = deepClone(emailConfig.value)
})
</script>

<template>
  <q-scroll-area style="height: calc(100vh - 50px)">
    <div class="q-pa-md">
      <h5 class="q-mt-none q-mb-md">{{ tc('系统设置') }}</h5>

      <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="left"
        narrow-indicator>
        <q-tab name="resources" :label="tc('资源配置')" />
        <q-tab name="rules" :label="tc('时间配置')" />
        <q-tab name="notifications" :label="tc('通知模板')" />
        <q-tab name="api" :label="tc('API配置')" />

        <q-tab name="email" :label="tc('邮箱配置')" />

        <q-tab name="terms" :label="tc('须知配置')" />

      </q-tabs>

      <q-separator />

      <q-tab-panels v-model="tab" animated>
        <!-- 资源配置 -->
        <q-tab-panel name="resources">

          <q-card class="q-mb-lg">
            <q-card-section v-if="loadingRoomConfig">
              <q-skeleton type="QInput" v-for="n in 5" :key="n" class="q-mb-sm" />
              <q-skeleton type="QBtn" width="100px" />
            </q-card-section>

            <q-card-section v-else>
              <q-form @submit.prevent="saveRoomConfig">
                <div class="row">
                  <!-- 50方会议室 -->
                  <div class="col-12">
                    <div class="text-subtitle2">{{ tc('50方会议室') }}</div>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input v-model.number="roomConfig.type_50_num" type="number" :label="tc('数量')" outlined dense
                      min="0" required />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-toggle v-model="roomConfig.type_50_visible" :label="tc('可见')" color="primary" />
                  </div>

                  <!-- 100方会议室 -->
                  <div class="col-12">
                    <div class="text-subtitle2 q-mt-md">{{ tc('100方会议室') }}</div>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input v-model.number="roomConfig.type_100_num" type="number" :label="tc('数量')" outlined dense
                      min="0" required />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-toggle v-model="roomConfig.type_100_visible" :label="tc('可见')" color="primary" />
                  </div>

                  <!-- 300方会议室 -->
                  <div class="col-12">
                    <div class="text-subtitle2 q-mt-md">{{ tc('300方会议室') }}</div>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input v-model.number="roomConfig.type_300_num" type="number" :label="tc('数量')" outlined dense
                      min="0" required />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-toggle v-model="roomConfig.type_300_visible" :label="tc('可见')" color="primary" />
                  </div>

                  <!-- 500方会议室 -->
                  <div class="col-12">
                    <div class="text-subtitle2 q-mt-md">{{ tc('500方会议室') }}</div>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input v-model.number="roomConfig.type_500_num" type="number" :label="tc('数量')" outlined dense
                      min="0" required />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-toggle v-model="roomConfig.type_500_visible" :label="tc('可见')" color="primary" />
                  </div>

                  <!-- 1000方会议室 -->
                  <div class="col-12">
                    <div class="text-subtitle2 q-mt-md">{{ tc('1000方会议室') }}</div>
                  </div>
                  <div class="col-12 col-md-6">
                    <q-input v-model.number="roomConfig.type_1000_num" type="number" :label="tc('数量')" outlined dense
                      min="0" required />
                  </div>
                  <div class="col-12 col-md-6">
                    <q-toggle v-model="roomConfig.type_1000_visible" :label="tc('可见')" color="primary" />
                  </div>
                </div>

                <div class="row justify-end q-mt-md">
                  <q-btn :label="tc('保存')" type="submit" color="primary" :loading="savingRoomConfig"
                    :disable="savingRoomConfig" class="relative-position">
                    <q-badge v-if="hasRoomConfigChanged" floating color="red" rounded />
                  </q-btn>
                </div>
              </q-form>
            </q-card-section>
          </q-card>
        </q-tab-panel>

        <!-- 时间配置 -->
        <q-tab-panel name="rules">
          <q-card class="q-mb-lg">
            <q-card-section>
              <div class="text-subtitle2 q-mb-md">{{ tc('时间配置') }}</div>

              <div class="row q-col-gutter-md">
                <div class="col-12 col-md-6">
                  <q-input v-model.number="reserveTimesConfig.reserve_room_advance_minutes" type="number"
                    :label="tc('前置预留时间（分钟）')" outlined dense min="0" />
                  <div class="text-caption text-grey">
                    {{ tc('在预约定开始时间之前预留的时间') }}
                  </div>
                </div>

                <div class="col-12 col-md-6">
                  <q-input v-model.number="reserveTimesConfig.meeting_after_reserve_minutes" type="number"
                    :label="tc('后置预留时间（分钟）')" outlined dense min="0" />
                  <div class="text-caption text-grey">
                    {{ tc('在预约定结束时间之后预留的时间') }}
                  </div>
                </div>

                <div class="col-12 col-md-6">
                  <q-input v-model.number="reserveTimesConfig.default_advance_notice_minutes" type="number"
                    :label="tc('前置通知时间（分钟）')" outlined dense min="0" />
                  <div class="text-caption text-grey">
                    {{ tc('在预约定开始时间之前发送通知的时间') }}
                  </div>
                </div>
              </div>
            </q-card-section>

            <q-card-actions align="right">
              <q-btn :label="tc('保存')" color="primary" @click="saveReserveTimesConfig" :loading="savingReserveTimes"
                class="relative-position">
                <q-badge v-if="hasReserveTimesConfigChanged" floating color="red" rounded />
              </q-btn>
            </q-card-actions>
          </q-card>
        </q-tab-panel>

        <!-- 通知模板 -->
        <q-tab-panel name="notifications">
          <div class="text-h6 q-mb-md">{{ tc('通知模板配置') }}</div>

          <!-- 预定成功通知 -->
          <q-card class="q-mb-lg">
            <q-card-section>
              <div class="text-subtitle2 q-mb-md">{{ tc('预定成功通知') }}</div>

              <div class="row q-col-gutter-md">
                <div class="col-12 col-md-6">
                  <div class="row items-center q-mb-md">
                    <div class="col">
                      <div class="text-weight-medium">{{ tc('邮件通知') }}</div>
                    </div>
                    <div class="col-auto">
                      <q-toggle v-model="systemSettings.notifications.bookingSuccess.emailEnabled" />
                    </div>
                  </div>

                  <q-input v-model="systemSettings.notifications.bookingSuccess.emailTemplate" type="textarea"
                    :label="tc('邮件模板')" outlined :disable="!systemSettings.notifications.bookingSuccess.emailEnabled"
                    autogrow />
                </div>

                <div class="col-12 col-md-6">
                  <div class="row items-center q-mb-md">
                    <div class="col">
                      <div class="text-weight-medium">{{ tc('短信通知') }}</div>
                    </div>
                    <div class="col-auto">
                      <q-toggle v-model="systemSettings.notifications.bookingSuccess.smsEnabled" />
                    </div>
                  </div>

                  <q-input v-model="systemSettings.notifications.bookingSuccess.smsTemplate" type="textarea"
                    :label="tc('短信模板')" outlined :disable="!systemSettings.notifications.bookingSuccess.smsEnabled"
                    autogrow />
                </div>
              </div>
            </q-card-section>
          </q-card>

          <!-- 会议提醒通知 -->
          <q-card class="q-mb-lg">
            <q-card-section>
              <div class="text-subtitle2 q-mb-md">{{ tc('会议提醒通知') }}</div>

              <div class="row q-col-gutter-md">
                <div class="col-12 col-md-6">
                  <div class="row items-center q-mb-md">
                    <div class="col">
                      <div class="text-weight-medium">{{ tc('邮件通知') }}</div>
                    </div>
                    <div class="col-auto">
                      <q-toggle v-model="systemSettings.notifications.meetingReminder.emailEnabled" />
                    </div>
                  </div>

                  <q-input v-model="systemSettings.notifications.meetingReminder.emailTemplate" type="textarea"
                    :label="tc('邮件模板')" outlined :disable="!systemSettings.notifications.meetingReminder.emailEnabled"
                    autogrow />
                </div>

                <div class="col-12 col-md-6">
                  <div class="row items-center q-mb-md">
                    <div class="col">
                      <div class="text-weight-medium">{{ tc('短信通知') }}</div>
                    </div>
                    <div class="col-auto">
                      <q-toggle v-model="systemSettings.notifications.meetingReminder.smsEnabled" />
                    </div>
                  </div>

                  <q-input v-model="systemSettings.notifications.meetingReminder.smsTemplate" type="textarea"
                    :label="tc('短信模板')" outlined :disable="!systemSettings.notifications.meetingReminder.smsEnabled"
                    autogrow />
                </div>

                <div class="col-12">
                  <div class="text-weight-medium q-mb-sm">{{ tc('提醒时间') }}</div>
                  <div class="row items-center q-gutter-sm q-mb-sm">
                    <q-chip v-for="time in systemSettings.notifications.meetingReminder.reminderTimes" :key="time"
                      removable @remove="removeReminderTime(time)">
                      {{ tc('提前 {0} 分钟', [time]) }}
                    </q-chip>

                    <q-btn flat round color="primary" icon="add" @click="addReminderTime" />
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>

          <!-- 会议取消通知 -->
          <q-card class="q-mb-lg">
            <q-card-section>
              <div class="text-subtitle2 q-mb-md">{{ tc('会议取消通知') }}</div>

              <div class="row q-col-gutter-md">
                <div class="col-12 col-md-6">
                  <div class="row items-center q-mb-md">
                    <div class="col">
                      <div class="text-weight-medium">{{ tc('邮件通知') }}</div>
                    </div>
                    <div class="col-auto">
                      <q-toggle v-model="systemSettings.notifications.bookingCancellation.emailEnabled" />
                    </div>
                  </div>

                  <q-input v-model="systemSettings.notifications.bookingCancellation.emailTemplate" type="textarea"
                    :label="tc('邮件模板')" outlined
                    :disable="!systemSettings.notifications.bookingCancellation.emailEnabled" autogrow />
                </div>

                <div class="col-12 col-md-6">
                  <div class="row items-center q-mb-md">
                    <div class="col">
                      <div class="text-weight-medium">{{ tc('短信通知') }}</div>
                    </div>
                    <div class="col-auto">
                      <q-toggle v-model="systemSettings.notifications.bookingCancellation.smsEnabled" />
                    </div>
                  </div>

                  <q-input v-model="systemSettings.notifications.bookingCancellation.smsTemplate" type="textarea"
                    :label="tc('短信模板')" outlined :disable="!systemSettings.notifications.bookingCancellation.smsEnabled"
                    autogrow />
                </div>
              </div>
            </q-card-section>

            <q-card-actions align="right">
              <q-btn :label="tc('保存')" color="primary" @click="saveNotificationsConfig" class="relative-position">
                <q-badge v-if="hasNotificationsConfigChanged" floating color="red" rounded />
              </q-btn>
            </q-card-actions>
          </q-card>
        </q-tab-panel>

        <!-- API配置 -->
        <q-tab-panel name="api">
          <div class="text-h6 q-mb-md">{{ tc('API配置') }}</div>

          <q-card class="q-mb-lg">
            <q-card-section>
              <div class="row items-center q-mb-md">
                <div class="col">
                  <div class="text-subtitle2">{{ tc('腾讯会议API') }}</div>
                </div>
                <div class="col-auto">
                  <q-toggle v-model="systemSettings.api.apiEnabled" />
                </div>
              </div>

              <div class="row q-col-gutter-md">
                <div class="col-12 col-md-6">
                  <q-input v-model="systemSettings.api.tencentMeetingAppId" :label="tc('AppID')" outlined dense
                    :disable="!systemSettings.api.apiEnabled" />
                </div>

                <div class="col-12 col-md-6">
                  <q-input v-model="systemSettings.api.tencentMeetingAppSecret" :label="tc('AppSecret')" outlined dense
                    type="password" :disable="!systemSettings.api.apiEnabled">
                    <template v-slot:append>
                      <q-icon name="visibility_off" />
                    </template>
                  </q-input>
                </div>

                <div class="col-12">
                  <q-input v-model="systemSettings.api.tencentMeetingApiUrl" :label="tc('API地址')" outlined dense
                    :disable="!systemSettings.api.apiEnabled" />
                </div>

                <div class="col-12">
                  <q-btn :label="tc('测试连接')" color="primary" outline :disable="!systemSettings.api.apiEnabled"
                    @click="testApiConnection" class="q-mt-sm" />
                </div>
              </div>
            </q-card-section>

            <q-card-actions align="right">
              <q-btn :label="tc('保存')" color="primary" @click="saveApiConfig" class="relative-position">
                <q-badge v-if="hasApiConfigChanged" floating color="red" rounded />
              </q-btn>
            </q-card-actions>
          </q-card>
        </q-tab-panel>

        <!-- 邮箱配置 -->
        <q-tab-panel name="email">
          <q-card class="q-mb-lg">
            <q-card-section>
              <div class="text-h6">{{ tc('邮箱配置') }}</div>

              <!-- 这里添加邮箱配置相关内容 -->
              <div class="row q-col-gutter-md q-mt-md">
                <div class="col-12 col-md-6">
                  <q-input v-model="emailConfig.smtp" :label="tc('SMTP服务器')" outlined dense />
                </div>
                <div class="col-12 col-md-6">
                  <q-input v-model.number="emailConfig.port" :label="tc('SMTP端口')" outlined dense type="number" />
                </div>
                <div class="col-12 col-md-6">
                  <q-input v-model="emailConfig.email" :label="tc('发件邮箱')" outlined dense />
                </div>
                <div class="col-12 col-md-6">
                  <q-input v-model="emailConfig.password" :label="tc('邮箱密码')" outlined dense type="password" />
                </div>
              </div>
            </q-card-section>

            <q-card-actions align="right">
              <q-btn :label="tc('保存')" color="primary" @click="saveEmailConfig" class="relative-position">
                <q-badge v-if="hasEmailConfigChanged" floating color="red" rounded />
              </q-btn>
            </q-card-actions>
          </q-card>
        </q-tab-panel>

        <!-- 预定须知配置 -->
        <q-tab-panel name="terms">
          <q-card class="q-mb-lg">
            <q-card-section v-if="loadingTerms">
              <q-skeleton type="QInput" height="150px" />
              <q-skeleton type="QBtn" width="100px" class="q-mt-md" />
            </q-card-section>

            <q-card-section v-else>
              <q-form @submit.prevent="saveTermsConditions">
                <q-editor v-model="termsConfig.content" min-height="5rem" :toolbar="[
                  ['bold', 'italic', 'strike', 'underline'],
                  ['link'],
                  ['unordered', 'ordered'],
                  ['viewsource']
                ]" />
                <div class="row justify-end q-mt-md">
                  <q-btn :label="tc('保存')" type="submit" color="primary" :loading="savingTerms" :disable="savingTerms"
                    class="relative-position">
                    <q-badge v-if="hasTermsConfigChanged" floating color="red" rounded />
                  </q-btn>
                </div>
              </q-form>
            </q-card-section>
          </q-card>
        </q-tab-panel>

      </q-tab-panels>
    </div>
  </q-scroll-area>
</template>
